<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
    padding: 0;
    margin: 0;
}

html, body {
    height: 100%;
}

div {
    border-radius: 50%;
    position: absolute;
}
</style>
</head>
<body>
<script>
for (var i = 0; i < 60; i++){
    createCircle(document.body);
}

/**
 * 创建一个球, 并把这个球添加到指定的容器中
 * @param container
 */
function createCircle(container){
    var div = document.createElement("div");
    var d = randomInt(20, 150);  // 生成球的直径
    div.style.width = d + "px";
    div.style.height = d + "px";
    // 字符串模板
    div.style.backgroundColor = `rgba(
        ${randomInt(0, 255)},
        ${randomInt(0, 255)},
        ${randomInt(0, 255)},
        ${Math.random() * 0.6 + 0.4})`
    div.style.left = randomInt(0, container.offsetWidth - d) + "px";
    div.style.top = randomInt(0, container.offsetHeight - d) + "px";
    container.appendChild(div);
}

/**
 作者:李振超      2017年8月1日 10:10
 返回随机的 [from, to] 之间的整数(包括from，也包括to)
 */
function randomInt(from, to){
    return parseInt(Math.random() * (to - from + 1) + from);
}
</script>
</body>
</html>
<!--
    作者：李振超  2017年8月1日08:52
    1. 多个小球, 动态的添加
    
    2. 动态生成球的大小  宽和高
    
    3. 动态的背景色
    
    4. 动态的位置  绝对布局 left 和 top
-->